<template>
  <el-card shadow="hover">
    <div
      ref="chartRef"
      :style="{ width: props.width, height: props.height }"
    ></div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from "vue";
import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from 'echarts';


const props = withDefaults(
  defineProps<{
    width?: string;
    height?: string;
    theme?: string;
    bgColor?: string;
    title: string
    data: number[] ;
    xAxis: string[];
  }>(),
  {
    width: "100%",
    height: "380px",
    data: () => [],
    xAxis: () => [],
  }
);
const option = {
  backgroundColor: props.bgColor,
  title:{
    text:props.title
  },
  xAxis: {
    type: "category",
    data: props.xAxis,
  },
  yAxis: {
    type: "value",

  },
  series: [
    {
      data: props.data,
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }
  ]
};
onMounted(() => {
  getLineChartData();
});
const getLineChartData = async () => {};
const { chartRef } = useEcharts({ props, option });
</script>
<style lang="scss" scoped></style>
